<%--
  Created by IntelliJ IDEA.
  User: Gao
  Date: 2023/8/2
  Time: 15:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    省份：
    <select id="provinceId" >
        <option>---请选择省份---</option>
    </select>
    城市：
    <select id="cityId">
        <option>---请选择城市---</option>
    </select>
    区县：
    <select id="areaId">
        <option>---请选择区县---</option>
    </select>

    <script src="<%=request.getContextPath()%>/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function() {
            $.post(
                '<%=request.getContextPath()%>/ajax3?method=selectProvince',
                function(jsonObj) {
                    console.log(jsonObj);
                    // [{id: 110000, name: '北京市'},{id: 210000, name: '辽宁省'}]
                    $(jsonObj).each(function() {
                        // this
                        // <option value="001">山东省</option>
                        //$('#provinceId').append('<option value="001">山东省</option>');
                        $('#provinceId').append('<option value="'+this.id+'">'+this.name+'</option>');
                    });
                },
                'json'
            );

            // 给省份下拉框绑定change事件
            $('#provinceId').change(function() {
                $('#cityId option:gt(0)').remove();
                // this
                var provinceId = $('#provinceId').val();
                $.post(
                    '<%=request.getContextPath()%>/ajax3?method=selectCity',
                    {'provinceId': provinceId},
                    function(jsonObj) {
                        console.log(jsonObj);
                        $(jsonObj).each(function() {
                            $('#cityId').append('<option value="'+this.id+'">'+this.name+'</option>');
                        });
                    },
                    'json'
                );

            });
        });
    </script>

</body>
</html>
